<template>

  <div>
  <div class="wechat-pay" v-if="!isPay">
    <h2>微信支付</h2>
    <div class="qr-code">
      <qrcode-vue :value="url" :size="size"></qrcode-vue>
    </div>
    <p class="hint">请使用微信扫描二维码完成支付</p>
  </div>
  <h1 v-else style="font-size: 60px; margin-left: 40%; margin-top: 100px;">支付完成</h1>
</div>
</template>
  
  <script>
import QrcodeVue from "qrcode.vue";
import axios from "axios";

export default {
  data() {
    return {
      url: "",
      size: 200,
      serialNumber: "", // 订单号
      pollInterval: 500, // 轮询间隔（毫秒）
      pollTimeout: 60000, // 轮询超时时间（毫秒）
      pollTimer: null, // 轮询定时器
      isPay:false,
    };
  },
  components: {
    QrcodeVue,
  },
  methods: {
    getUrl() {
      this.url = this.$route.query.url;
      this.serialNumber = this.$route.query.serialNumber;
      this.startPolling();
    },
    startPolling() {
      this.pollTimer = setInterval(() => {
        this.checkPayStatus();
      }, this.pollInterval);
      // 设置超时逻辑
      setTimeout(() => {
        this.stopPolling();
        alert("支付超时，请重新尝试");
        this.$router.push("/managerIndex/manageOrder/myOrder");
      }, this.pollTimeout);
    },
    stopPolling() {
      if (this.pollTimer) {
        clearInterval(this.pollTimer);
        this.pollTimer = null;
      }
    },
    async checkPayStatus() {
      try {
        const response = await axios.post("/api/wx/checkPayStatus", {
          serialNumber: this.serialNumber,
        });
        if (response.data.status === "paid") {
          this.isPay=true;
          this.stopPolling();

          setTimeout(() => {
            this.$router.push("/managerIndex/manageOrder/myOrder");
          }, 1000);
        }
      } catch (error) {
        console.error("检查支付状态失败", error);
      }
    },
  },
  created() {
    this.getUrl();
  },
  beforeDestroy() {
    this.stopPolling(); // 确保组件销毁时停止轮询
  },
};
</script>
  
  <style>
.wechat-pay {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #4caf50; /* 绿色边框 */
  border-radius: 16px;
  background-color: #f0fff0; /* 浅绿色背景 */
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.header {
  margin-bottom: 20px;
}

.header h2 {
  color: #4caf50; /* 绿色标题 */
  font-size: 24px;
  margin: 0;
}

.header .hint {
  color: #666;
  font-size: 14px;
  margin-top: 8px;
}

.qr-code {
  margin: 20px 0;
}

.qr-code canvas {
  border: 2px solid #4caf50; /* 绿色边框 */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 600px) {
  .wechat-pay {
    width: 90%;
    margin: 20px auto;
  }

  .qr-code canvas {
    width: 150px;
    height: 150px;
  }
}
</style>